<template>
    <div>
        <page-main>
            <el-table
                :data="currentPageRepList"
                style="width: 100%;"
                :row-style="{height:'80px'}"
            >
                <el-table-column
                    prop="date"
                    label="评论日期"
                >
                    <template slot-scope="scope">
                        <p>{{ new Date(scope.row.date).toLocaleDateString() }}</p>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="用户名称"
                />
                <el-table-column
                    prop="content"
                    label="评论内容"
                />
                <el-table-column
                    prop="agree"
                    label="支持数"
                />
                <el-table-column
                    prop="oppose"
                    label="反对数"
                />
                <el-table-column
                    label="操作"
                >
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" @click="delRepFn(scope.row.id)">删除</el-button>
                        <el-button v-if="!scope.row.audit" size="mini" type="primary" @click="audit(scope.row.id)">通过</el-button>
                        <el-button v-else size="mini">已通过</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row v-if="RepList.length > 5" class="page-container" type="flex" justify="end">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="RepList.length"
                    :page-size="5"
                    @current-change="handleCurrentChange"
                />
            </el-row>
        </page-main>
    </div>
</template>
<script>
import { getRepList, delComments, auditComment } from '@/api/myIndex'
export default {
    name: 'LeaveMessage',
    data() {
        return {
            RepList: [],
            currentPageRepList: [],
            currentPageNum: 1
        }
    },
    created() {
        this.getRep()
    },
    methods: {
        // 获取所有留言
        async getRep() {
            let result = await getRepList()
            if (result.code === 200) {
                this.RepList = result.data
                // 默认展示前五条
                this.handleCurrentChange(1)
            }
        },

        // 删除留言
        async delRepFn(id) {
            await this.$confirm('确认删除该评论?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            let result = await delComments(id)
            if (result.code === 200) {
                this.$message({
                    message: '删除成功!',
                    type: 'success'
                })
                this.RepList = this.RepList.filter(item => item.id !== id)
                // 重新计算分页
                this.handleCurrentChange(this.currentPageNum)
                return
            }
            this.$message.error(result.message)
        },

        // 放行留言
        async audit(id) {

            await this.$confirm('审核成功，前端将展示该评论!', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            let {code, message} = await auditComment(id)
            if (code === 200 && message == '成功') {
                this.currentPageRepList.forEach(element => {
                    if (element.id == id) {
                        element.audit = 1
                    }
                    console.log(element)
                })
                this.$message({
                    message: '成功',
                    type: 'success'
                })
                return
            }
            this.$message.error(message)
        },

        // 分页功能
        handleCurrentChange(val) {
            // 保存当前分页码
            this.currentPageNum = val
            this.currentPageRepList = this.RepList.filter((item, index) => {
                if (index >=  (val - 1) * 5 && index < val * 5) return item
            })
        }
    }
}
</script>
<style>
.is-justify-end {
    margin-top: 20px;
}
</style>
